<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- JQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!-- Bootstrap CSS -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>客房管理页面</title>
</head>
<body>
    <!-- 酒店数量修改模态框 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="edit_model" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <a id="edit_label" ></a>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label">修改数量</label>
                        <input type="text" class="form-control" name="number" id="rNumber">
                        <input type="hidden" name="rid" id="roomId">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" th:onclick="|javascript:editNumber()|" >确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增酒店类型模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5><a id="titleModal">新增酒店类型</a></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="/system/roomadd" method="post" enctype="multipart/form-data" role="form">
                        <div class="form-row">
                            <label for="roomImage" class="col-md-1">房间图片:</label>
                            <div class="form-group col-md-4">
                                <input class="form-control" type="file" id="roomImage" name="roomImage">
                            </div>
                        </div>
                        <div class="form-row">
                            <label for="title" class="col-md-1">房间标题:</label>
                            <div class="form-group col-md-4">
                                <input class="form-control" type="text" id="title" name="title" />
                                <input type="hidden" name="hid" th:value="${hotel.id}">
                            </div>
                        </div>
                        <div class="form-row">
                            <label for="area" class="col-md-1">房间面积:</label>
                            <div class="form-group col-md-4">
                                <input class="form-control" type="text" id="area" name="area" /><br />
                            </div>
                        </div>
                        <div class="form-row">
                            <label for="num" class="col-md-1">容纳人数:</label>
                            <div class="form-group col-md-4">
                                <input class="form-control" type="text" id="num" name="num" /><br />
                            </div>
                        </div>
                        <div class="form-row">
                            <label for="bed" class="col-md-1">床型:</label>
                            <div class="form-group col-md-4">
                                <input class="form-control" type="text" id="bed" name="bed" /><br />
                            </div>
                        </div>
                        <div class="form-row">
                            <label for="info" class="col-md-1">房间信息:</label>
                            <div class="form-group col-md-4">
                                <textarea class="form-control" rows="5" id="info" name="info"></textarea>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                            <button type="submit" class="btn btn-primary" >提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- 标题 -->
    <div class="row">
        <div class="col-md-12">
            <h3>当前酒店是: <span th:text="${hotel.hotelName}"></span> </h3>
        </div>
    </div>
    <!-- 新增按钮 -->
    <div class="row">
        <div class="col-md-2 col-md-offset-10">
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">新增酒店类型</button>
        </div>
    </div>

    <div>
        <table class="table table-bordered table-hover">
            <thead class="thead-light">
            <tr>
                <td>编号</td>
                <td>客房标题</td>
                <td>客房面积</td>
                <td>容纳人数</td>
                <td>床型</td>
                <td>图片</td>
                <td>详情</td>
                <td>房间数量</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr th:each="room : ${rList.data}">
                <td th:text="${room.id}">编号</td>
                <td th:text="${room.title}">客房标题</td>
                <td th:text="${room.area}">客房面积</td>
                <td th:text="${room.num}">容纳人数</td>
                <td th:text="${room.bed}">床型</td>
                <td><img style="width: 120px; height: 90px" class="img-rounded" th:src="|/system/getImage?path=${room.image}|"/></td>
                <td th:text="${room.info}">详情</td>
                <td th:text="${room.number}">房间数量</td>
                <td>
                    <button type="button" class="btn btn-info btn-xs" th:data="${room.title}" th:onclick="|javascript:to_numedit(${room.id},${room.number},this.getAttribute('data'));|">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改房间数量
                    </button>
                    <a th:href="${'/system/toupdateprice?rid=' + room.id}">
                       调整房间价格
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <script type="text/javascript">
        //弹出修改房间数模态框
        function to_numedit(bid,number,title) {
            $("#edit_label").text(title+"(当前数量:"+number+")");
            $("#roomId").val(bid);
            //弹出模态框
            $("#edit_model").modal({
                backdrop:"static"
            });
        }

        function editNumber() {
            var num = document.getElementById("rNumber").value;
            var bid = document.getElementById("roomId").value;
            //alert(num);
            $.ajax({
                url:"/system/updateBNum/"+bid,
                type:"POST",
                data: {num: num},
                dataType: JSON
            });
        }

        function to_priedit() {
            alert("调整房间价格");
        }

    </script>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></body>
</html>